<template>
  <el-card>
    <div id="container"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "BMap",
};
</script>

<script lang="ts" setup>
import { onMounted } from "vue";
onMounted(() => {
  const script = document.createElement("script");
  script.src =
    "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=EuMSQK1KBMPsMt7hPpbafh6iqZnTSaGm&callback=initMap";
  window.initMap = () => {
    const map = new BMapGL.Map("container");
    const point = new BMapGL.Point(112.325, 29.064);
    map.centerAndZoom(point, 12);
    const scaleCtrl = new BMapGL.scaleCtrl(); // 比例尺
    map.addControl(scaleCtrl);
    const zoomControl = new BMapGL.ZoomControl();
    map.addControl(zoomControl);
    const cityCtrl = new BMapGL.CityListControl();
    map.addControl(cityCtrl);
  };
  document.body.appendChild(script);
});
</script>

<style scoped>
#container {
  height: 500px;
}
</style>
